iT邦幫忙

2022 iThome 鐵人賽

DAY 7
0
Mobile Development

在 iOS 開發路上的大小事2系列 第 7

【在 iOS 開發路上的大小事2-Day07】當個製圖大師-第三方套件 Charts 之長條圖

  • 分享至 

  • xImage
  •  

在 iOS App 中如果想要繪製各式圖表的話,除了自己手刻外
也可以透過第三方套件-Charts 來幫你產生各式圖表

Charts 套件作者 Github 連結 (點我前往)

那要如何安裝 Charts 套件呢
Charts 本身提供了「CocoaPodsCarthageSwift Package Manager」這三種安裝方式
這邊我選擇使用 CocoaPods 來安裝~如果不知道如何使用的話,可以先去看去年我寫的這篇~
【在 iOS 開發路上的大小事-Day11】透過 CocoaPods 來管理第三方套件

安裝完 CocoaPods 後,就要來裝套件了~
打開 Podfile,然後輸入「pod 'Charts', '4.0.2'」,像是下面這樣
這邊會在套件名稱後面,多寫套件版本是因為要做版本控制的關係
不寫的話,pod 會自動去裝最新版的套件

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'ChartsDemo' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!
	pod 'Charts', '4.0.2'
  # Pods for ChartsDemo
end

裝好後,就開始來動工吧!
成品圖的 UI 長得像是下面這樣 ↓

那就開始設計 UI 吧~

設計步驟:
1. 拉一個 UIView,並設好 AutoLayout
2. 將這個 UIView 的 class 改為 BarChartView
3. 拉好 @IBOutlet

至於上面那塊 NavigationBar 的顏色,我是寫在 BaseViewController.swift 裡面,不改也沒關係的~
至於下面那塊 Footer,我是自己另外拉的,不拉也沒關係的~

重點程式碼~

首先要 import Charts,不然 Xcode 可是不認識 BarChartView 是什麼東西呢

import Charts

再來是 @IBOutlet

class BarChartViewVC: UIViewController {
    
    @IBOutlet weak var barChartView: BarChartView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

    }
}

接著就來給這個長條圖一點資料吧
先宣告一個 長條圖的資料陣列

var barChartViewDataEntries1: [BarChartDataEntry] = [] // 長條圖資料陣列

接著再給這個資料陣列一點資料

// MARK: Bar Chart View Data Input

func barChartViewDataInput() {
    barChartViewDataEntries1 = [
        BarChartDataEntry.init(x: 0.0, y: 0.15 * 100),
        BarChartDataEntry.init(x: 1.0, y: 0.2 * 100),
        BarChartDataEntry.init(x: 2.0, y: 0.15 * 100),
        BarChartDataEntry.init(x: 3.0, y: 0.18 * 100),
        BarChartDataEntry.init(x: 4.0, y: 0.12 * 100),
        BarChartDataEntry.init(x: 5.0, y: 0.04 * 100),
        BarChartDataEntry.init(x: 6.0, y: 0.06 * 100)
    ]
}

資料給完之後,就要來設定這個長條圖的一些配置了

// MARK: Bar Chart View Configuration

func barChartViewConfiguration() {
    let formatter = NumberFormatter()
    formatter.positiveSuffix = "%"

    // 第一組長條圖資料
    let chartDataSet1 = BarChartDataSet(entries: barChartViewDataEntries1, label: "")
    chartDataSet1.colors = [.red, .green, .blue, .orange] // 設定長條圖的顏色
    chartDataSet1.valueFormatter = DefaultValueFormatter(formatter: formatter) // 客製化設定資料數值的格式
    chartDataSet1.valueFont = UIFont.systemFont(ofSize: 17.0) // 設定資料數值的字體大小

    let chartData = BarChartData(dataSets: [chartDataSet1])
    barChartView.data = chartData // 將 chartData 指派給 barChartView
    barChartView.drawBordersEnabled = false // 繪製 barChartView 邊框
    barChartView.legend.form = .none // 取消圖例
    barChartView.scaleXEnabled = false // 關閉 x 軸縮放
    barChartView.scaleYEnabled = false // 關閉 y 軸縮放
    barChartView.doubleTapToZoomEnabled = false // 關閉雙擊縮放
    barChartView.highlightPerTapEnabled = false // 關閉單點選中
    barChartView.highlightPerDragEnabled = false // 關閉拖曳選中
    barChartView.xAxis.drawGridLinesEnabled = false // 取消垂直網格線
    barChartView.xAxis.labelPosition = .bottom // 將 x 軸座標數值設在底部
    barChartView.xAxis.labelCount = barChartViewDataEntries1.count // 設定全部的 x 軸值的數量
    barChartView.xAxis.drawAxisLineEnabled = false // 不顯示 x 軸的線
    barChartView.xAxis.centerAxisLabelsEnabled = false // 讓 x 軸的值置中顯示
    barChartView.xAxis.enabled = false // 取消 x 軸座標
    barChartView.leftAxis.enabled = true // 顯示左側 y 軸座標
    barChartView.leftAxis.drawAxisLineEnabled = false // 不顯示左側 y 軸的線
    barChartView.leftAxis.drawGridLinesEnabled = true // 顯示水平網格線
    barChartView.rightAxis.enabled = false // 取消右側 y 軸座標
    barChartView.rightAxis.drawAxisLineEnabled = false // 不顯示右側 y 軸的線
}

最終的完整程式碼~

import UIKit
import Charts

class BarChartViewVC: BaseViewController {
    
    @IBOutlet weak var barChartView: BarChartView!
    @IBOutlet weak var customFooterView: CustomFooterView!
    
    var barChartViewDataEntries1: [BarChartDataEntry] = [] // 長條圖資料陣列
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupNavigationBarStyle(backgroundColor: .systemPink, tintColor: .white, foregroundColor: .white)
        self.title = "Bar Chart View"
        customFooterView.setBackgroundColor(bgColor: .systemPink)
        setupBarChartView()
    }
    
    // MARK: - Setting Bar Chart View
    
    func setupBarChartView() {
        barChartViewDataInput()
        barChartViewConfiguration()
    }
    
    // MARK: Bar Chart View Data Input
    
    func barChartViewDataInput() {
        barChartViewDataEntries1 = [
            BarChartDataEntry.init(x: 0.0, y: 0.15 * 100),
            BarChartDataEntry.init(x: 1.0, y: 0.2 * 100),
            BarChartDataEntry.init(x: 2.0, y: 0.15 * 100),
            BarChartDataEntry.init(x: 3.0, y: 0.18 * 100),
            BarChartDataEntry.init(x: 4.0, y: 0.12 * 100),
            BarChartDataEntry.init(x: 5.0, y: 0.04 * 100),
            BarChartDataEntry.init(x: 6.0, y: 0.06 * 100)
        ]
    }
    
    // MARK: Bar Chart View Configuration
    
    func barChartViewConfiguration() {
        let formatter = NumberFormatter()
        formatter.positiveSuffix = "%"
        
        // 第一組長條圖資料
        let chartDataSet1 = BarChartDataSet(entries: barChartViewDataEntries1, label: "")
        chartDataSet1.colors = [.red, .green, .blue, .orange] // 設定長條圖的顏色
        chartDataSet1.valueFormatter = DefaultValueFormatter(formatter: formatter) // 客製化設定資料數值的格式
        chartDataSet1.valueFont = UIFont.systemFont(ofSize: 17.0) // 設定資料數值的字體大小
        
        let chartData = BarChartData(dataSets: [chartDataSet1])
        barChartView.data = chartData // 將 chartData 指派給 barChartView
        barChartView.drawBordersEnabled = false // 繪製 barChartView 邊框
        barChartView.legend.form = .none // 取消圖例
        barChartView.scaleXEnabled = false // 關閉 x 軸縮放
        barChartView.scaleYEnabled = false // 關閉 y 軸縮放
        barChartView.doubleTapToZoomEnabled = false // 關閉雙擊縮放
        barChartView.highlightPerTapEnabled = false // 關閉單點選中
        barChartView.highlightPerDragEnabled = false // 關閉拖曳選中
        barChartView.xAxis.drawGridLinesEnabled = false // 取消垂直網格線
        barChartView.xAxis.labelPosition = .bottom // 將 x 軸座標數值設在底部
        barChartView.xAxis.labelCount = barChartViewDataEntries1.count // 設定全部的 x 軸值的數量
        barChartView.xAxis.drawAxisLineEnabled = false // 不顯示 x 軸的線
        barChartView.xAxis.centerAxisLabelsEnabled = false // 讓 x 軸的值置中顯示
        barChartView.xAxis.enabled = false // 取消 x 軸座標
        barChartView.leftAxis.enabled = true // 顯示左側 y 軸座標
        barChartView.leftAxis.drawAxisLineEnabled = false // 不顯示左側 y 軸的線
        barChartView.leftAxis.drawGridLinesEnabled = true // 顯示水平網格線
        barChartView.rightAxis.enabled = false // 取消右側 y 軸座標
        barChartView.rightAxis.drawAxisLineEnabled = false // 不顯示右側 y 軸的線
    }
}

本篇的參考範例程式碼:Github

參考資料

https://www.hangge.com/blog/cache/detail_2148.html


上一篇
【在 iOS 開發路上的大小事2-Day06】當個製圖大師-第三方套件 Charts 之折線圖
下一篇
【在 iOS 開發路上的大小事2-Day08】當個製圖大師-第三方套件 Charts 之圓餅圖
系列文
在 iOS 開發路上的大小事230
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言